// sass完全兼容css
// div{
// 	height: 100px;
// 	width: 200px;
// 	background-color: black;
// 	font-size: 20px;
// 	color: #FFFFFF;
// 	border: solid 1px black;
// }

/**
 * ----------------------------什么是sass
 * 
 * Sass是成熟、稳定、强大的css预处理器，而SCSS是Sass3版本当中引入的新语法特性，
 * 完全兼容CSS3的同时，也继承了Sass强大的动态功能
 */

/**
 * ---------------------------Scss和Sass区别
 * 
 * 文件扩展名不同：Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名
 * 语法书写方式不同：Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号，而 Scss 用大括号{}取代了原来的缩进。
 * 
 */

/**
 * ---------------------------scss支持的7种数据类型
 * 
 * 数字、字符串、颜色、布尔、空值nul、数组(用空格或逗号做分隔符)、maps(相当于JavaScript的object)
 * 
 * 数字，1rem、2vh、13、 10px；
 * 
 * 字符串，分有引号字符串与无引号字符串，"foo"、 'bar'、baz；
 * 
 * 颜色，blue, #04a3f9, rgba(255,0,0,0.5)；
 * 
 * 布尔型，true和false；
 * 
 * 空值，null是其类型的唯一值。表示缺少值，通常由函数返回以表示缺少结果；、
 * 
 * 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em,Helvetica,Arial,sans-serif；
 * 
 * maps， 相当于 JavaScript的 object，(key1: value1, key2: value2)；
 * 
 */

// 单行注释不会编译到css文件

/**
 * // 1.变量声明
 * // Sass变量必须以$开头，变量名和值之间使用冒号:隔开
 */

// 声明的是全局变量
// $minWidth:200px;
// $minHeight:300px;
// $mainColor:orange;
// div{
// 	width: $minWidth;
// 	height: $minHeight;
// 	background-color: $mainColor;
// 	$content:'我是一名学生' !global; // 局部变量,global可以将局部变量转换为全局变量
// 	.title::before{
// 		content: $content;
// 	}
// }
// p::before{
// 	content:$content;
// }

/**
 * // 2.继承
 * // Sass模块继承可以通过@extend语法实现
 */
// $val1:200px;
// .box1{
// 	width: $val1;
// 	height: $val1;
// 	background-color: aquamarine;
// }

// .box2{
// 	@extend .box1;
// 	background-color: antiquewhite;
// }

/**
 * 3.选择器嵌套----父选择器&符号----&符号用于选择器拼接
 * css中重复写选择器很麻烦、scss的选择器嵌套可以避免重复输入父选择器
 */
// $width:200px;
// .box1{
// 	width: $width;
// 	height: $width;
// 	background-color: aqua;
// 	.inner_box{
// 		$myWidth:$width - 50px;
// 		width: $myWidth;
// 		height: $myWidth;
// 		background-color: black;
// 		transition: all 0.5s;
// 		&:hover{
// 			background-color: yellow;
// 			transition: all 0.5s;
// 		}
// 	}
// 	&_title{
// 		color:green;
// 		font-size: 18px;
// 	}
// }

/**
 * 4.圆括号()
 * 可以用来影响运算的顺序，和数学中的效果是一致的。
 * 
 */

/**
 * 5.等值运算符
 * 相等运算== 和不相等运算!=。所有数据类型均支持 == 和!=，另外，每种数据类型也有其各自支持的运算方式。
 * 
 */

// $count:10;
// $context:'我是谁';
// $color1:blue;
// $color2:red;
// .box1{
// 	height: 100px;
// 	width: 200px;
// 	@if $count != 10 {
// 		background-color: $color1;
// 	}@else{
// 		background-color: $color2;
// 	}
// }
/**
 * 6.关系运算符
 * 四个关系运算符< > >= <=
 * 
 */

/**
 * 7.布尔运算符
 * 三个布尔运算符and or not
 * 
 */
// $count:10;
// $context:'我是谁';
// $color1:blue;
// $color2:red;
// .box1{
// 	height: 100px;
// 	width: 200px;
// 	@if not true {
// 		background-color: $color1;
// 	}@else{
// 		background-color: $color2;
// 	}
// }

/**
 * 8.数字运算符
 * 五个布尔运算符+ - * / %
 * // 纯数字与百分号或单位运算时会自动转化成相应的百分比与单位值 
 */
// $width:200px;
// div{
// 	width: 50 - 50;
// 	height: ($width/2);
// 	height: (500px/2);
// }

/**
 * 9.字符串运算
 * +可用于连接字符串；
 * 如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的；
 * 无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
 * 
 */
// .container {
//     content: "Foo "+Bar;
//     font-family: sans-+"serif";
// }

/**
 * 10.插值语句
 * 通过 # {} 插值语句可以在选择器、属性名、注释中使用变量，使用# {}插值语句将变量包裹起来即可，
 * 和js中的模板字符串很像。
 * 
 */
// $size:size;
// $titleName:title;
// $width:100px;
// $author:'王祥鑫';
// /**
//  * 作者#{$author}
//  */
// .box1_#{$titleName}{
// 	width: $width;
// 	height: $width;
// 	font-#{$size}: 18px;
// }

/**
 * 11.流程控制
 * sass中流程控制包含四类，也是我们在js中常见的@if、@for、@each、@while
 * @if
 * @if语法和js类似，基本格式是@if...@else if...@else。
 * 
 */

// $theme:3;
// .container {
// 	@if $theme >= 2 {
//         background-color: red;
// 	}@else if $theme >= 3 {
// 		background-color: blue;
// 	}@else{
// 		background-color: green;
// 	}
// }

/**
 * 12=====for在条件范围内重复操作，这个指令包含两种格式：
 * @for $var from <start> through <end>；
 * @for $var from <start> to <end>。
 * 两者区别在于 through 与 to的含义：
 * 使用 through时，条件范围包含 <start> 与 <end>的值；
 * 使用 to时条件范围只包含<start>的值不包含<end>的值；
 * $var 可以是任何变量，比如$i，<start> 和 <end> 必须是整数值。
 */

// @for $i from 3 to 6{
// 	.p#{$i}{
// 		width: 100px;
// 	}
// }

// @for $i from 3 through 6{
// 	.div#{$i}{
// 		width: 100px;
// 	}
// }

/**
 * 13=====@each
 * @each指令的格式是@each $var in $list , $var可以是任何变量名，
 * 比如$length 或者$name，而$list是一连串的值，也就是值列表。
 */
// $list:red blue;
// @each $var in $list {
// 	$index:index($list, $var);
// 	.p#{$index - 1}{
// 		width: 100px * $var;
// 	}
// }

/**
 * 14=====@while
 * @while 指令循环输出直到表达式返回结果为 false。这样可以实现比@for 更复杂的循环。
 * 比如，可以借此生成栅格化布局。
 */
// $count:0;
// @while $count < 10 {
// 	.p#{$count}{
// 		width: 100px;
// 	}
// 	$count:$count + 1;
// }

/**
 * 15=====@import  支持多文件导入，用“,”号隔开
 * @import算是一个比较简易的模块系统。
 * scss拓展了@import 的功能，允许其导入 scss或 sass文件。
 * 被导入的文件将合并编译到同一个 css文件中，
 * 被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
 */

// @import "./common.scss";
// body{
// 	background-color: $themeColor;
// }

/**
 * 17.================@media 媒体查询增强
 * scss中，@media 指令与 css中用法一样，只是增加了一点额外的功能，允许在css规则中嵌套。
 * 如果@media 嵌套在 css规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。
 * 这个让 @media 方便不少，不需要重复写选择器，也不会打乱 css的书写流程。
 */

/**
 * 18.================@mixin 混入
 * 混合指令（Mixin）用于定义可重复使用的样式。
 * 混合指令可以包含所有的css规则，绝大部分 scss规则，
 * 甚至可以通过参数功能引入变量，输出多样化的样式。
 * @mixin mixin-name() { css 声明 }
 * 使用
 * @include mixin-name;
 */

// @mixin message1($fontSize:16px,$color:red,$textAlign:center,$lineHeight:16px,$padding:6px){
// 	font-size: $fontSize;
// 	color:$color;
// 	text-align: $textAlign;
// 	line-height: $lineHeight;
// 	padding: $padding;
// }

// .message2{
// 	@include message1(18px,red,center,20px,6px);
// }

// .message3{
// 	@include message1(30px,yellow,left,40px,12px);
// }

// .message4{
// 	@include message1($color:blue,$fontSize:16px,$textAlign:right);
// }


/**
 * 19.@function
 * @function用于封装复杂的操作，可以很容易地以一种可读的方式抽象出通用公式和行为，
 * 函数提供返回值，常用来做计算方面的工作。
 */

@function sum($a,$b){
	@return $a + $b;
}
p{
	width: sum(10, 20);
}




























